<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>vue-components</title>

	<!-- ⭐⭐！！ 组件要在实例之前创建 // 组件要（写在）实例之前-->
	<!-- Vue实例是不是在组件前面,
		若在前面创建实例,则无法读取到后面创建的组件. -->
</head>
<body>
	<div id="app">
		<h1><span style="color: red;">全局组件</span>-那里都能用-前提已绑定某一个Vue实例</h1>
		<a-ct></a-ct>
		<hr />

	</div>
	<h1>全局可以插入局部，反之则不建议</h1>
	<hr>
	<div id="app02">
		<h1><span style="color: red;">局部组件</span>-vue实例绑定的指定的元素</h1>
		<b-ct></b-ct>
		<hr />
		<c-ct></c-ct>
	</div>
	
	
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 全局组件-基本语法！！
		Vue.component('a-ct',{
			// 注意 attention ： 只能有一个根元素！！！（此处为div）
			template:"<div><h1>helloo全局</h1><h1>helloo全局</h1><h1>helloo全局</h1></div>",
			
			data(){
				return {
					count:0,
				}
			}
		});

		new Vue({
			el:"#app",
			data(){
				return{
					msg:"hello!"
				}
			},
			methods:{},
			computed:{},
			watch:{}
		})

		new Vue({
			el:"#app02",
			data(){
				return{

				}
			},
			components:{
				'b-ct':{
					template:"<div><h1>hello局部</h1><h1>hello局部</h1></div>"
				},
				'c-ct':{
					template:"<div><h1>hello局部</h1><a-ct></a-ct><h1>hello局部</h1></div>"
				}
			}
		})
	</script>
</body>
</html>